<template>
	<view class="pledge-content">
		<view class="module1">
			<view class="leftText">
				<span>{{$t('common.pledgeBalance')}}</span>
				<span class="leftNum">{{user.pledgeAmount}}</span>
			</view>
			<view class="leftText">
				<span>{{$t('pledge.tokenAmount')}}</span>
				<span class="leftNum">{{user.coinAmount}}</span>
			</view>
		</view>
		<view class="listBox">
			<view class="listItem" v-for="item in pledgeList">
				<span class="title"></span>
				<view class="typeBox">
					<view class="type1">
						<view class="span span1">{{$t('pledge.yield')}}：{{item.yield}}</view>
						<view class="span span2">{{$t('pledge.revenue')}}：{{item.revenue}}</view>
					</view>
					<view class="type1">
						<view class="span span3">{{$t('pledge.cycle')}}：{{item.investmentCycle}}</view>
						<view class="span span4">{{$t('pledge.limit')}}：{{item.pledgeLimit}}</view>
					</view>
				</view>
				<view class="moneyBox">
					<span v-if="!item.rewardTime">{{item.price}}$</span>
					<view v-if="!item.rewardTime"><button class="mini-btn buy-btn" type="primary" size="mini" @click="buy(item)">{{$t('shop.buy')}}</button>
					</view>
					<view class="reward" v-else>
						ganancia: {{item.rewardTime}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	import {
		getMineInfo,
		pledgeList,
	} from "@/api/system/user.js"
	
	export default {
		data() {
			return {
				user:{},
				pledgeList:[]
			};
		},
		onLoad() {
			getMineInfo().then(rsp => {
				if (rsp.code == 200) {
					this.user = rsp.data;
					
				}
			});	
			pledgeList().then(rsp => {
				if (rsp.code == 200) {
					this.pledgeList = rsp.rows;
					
				}
			});	
		},
		onShow() {
			uni.setTabBarItem({
				index: 4,
				visible: false
			})
		},
		methods: {
			buy(item) {
				console.log(item)
				uni.navigateTo({
					url: '/pages/mine/recharge/recharge?pledgeId='+item.id+'&pledgePrice='+item.price
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $uni-color-bg;

	}

	.pledge-content {
		margin: 0 10px;

		.module1 {
			display: flex;
			padding: 0 70px 12px 20px;
			justify-content: space-between;
			height: 100px;
			border-radius: 10px 10px 10px 10px;
			background-color: $uni-color-primary;
			color: $uni-color-box;

			.leftText {
				display: flex;
				flex-direction: column;
				padding-top: 20px;
				font-size: 12px;
				font-weight: 400;

				.leftNum {
					display: inline-block;
					padding-top: 20px;
					font-size: 22px;
					font-family: Black Ops One;
					font-weight: 600;
				}

			}
		}

		.listBox {
			.listItem {
				margin: 10px 0;
				background-color: $uni-color-box;
				box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1216);
				border-radius: 10px;

				.title {
					display: flex;
					justify-content: center;
					font-size: 16px;
					font-weight: 400;
					color: $uni-color-primary;
					padding: 15px 0;
				}

				.typeBox {
					padding: 0 10px;

					.type1 {
						margin-top: 6px;
						display: flex;

						.span {
							flex: 1;
							border-radius: 13px;
							text-align: center;
							height: 28px;
							line-height: 28px;
							opacity: 1;
							font-size: 12px;
							font-weight: 400;
						}

						.span1 {
							border: 1px solid #e55e3c;
							color: #e55e3c;
							margin-right: 11px;
						}

						.span2 {
							border: 1px solid #1abfac;
							color: #1abfac;
						}

						.span3 {
							border: 1px solid #42b337;
							color: #42b337;
							margin-right: 11px;
						}

						.span4 {
							border: 1px solid #eaa02a;
							color: #eaa02a;
						}
					}
				}

				.moneyBox {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 12px 10px;
					font-size: 20px;
					font-weight: 400;
					color: $uni-color-primary;

					.buy-btn {
						background-color: $uni-color-primary;
						border-radius: 15px;
						color: $uni-color-box;
					}
					.reward{
						margin-left: 10px;
						font-size: 15px;
					}
				}

			}
		}
	}
</style>